<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>simple</title>
  </head>
  <body>
    <div class="page">
      <header>
        <div class="head-line">
          <div class="logo"></div>
          <div class="tool">
            <div class="user-center">用户中心</div>
            <div class="logout">退出</div>
          </div>
        </div>
      </header>
      <div class="container">
        <aside>
          <div class="navbar">
            <div class="item">
              <div class="icon">#</div>
              <div class="label">图片</div>
            </div>
            <div class="item">
              <div class="icon">￥</div>
              <div class="label">视频</div>
            </div>
            <div class="item">
              <div class="icon">%</div>
              <div class="label">音频xxxx</div>
            </div>
          </div>
        </aside>
        <main></main>
      </div>
    </div>
    <style>
      .head-line{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;
      }
      .logo{
        width: 48px;
        /* height: 40px;  */
        /* background-color: green; */
        background-image: url("filtertestss.png");
        background-size: cover;
        background-position: 10% 20%;
        background-repeat: no-repeat;
      
      }
      .user-center{
        margin: 6px;
        font-size: 14px;
      }
      .logout{
        margin: 10px;
        font-size: 14px;
      }
      .tool{
        width: 120px;
        /* height: 40px; */
        background-color: brown;
        display: flex;
        flex-direction: row;
        justify-content: start;
        align-items: center;

      }
      .navbar {
        background-color: aqua;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: center;
        padding-left: 10px;
      }
      .item {
        /* margin-left: 10px; */
        width: 220px;
        background-color: burlywood;
        border: 2px solid red;
        display: flex;
        flex-direction: row;
        justify-content: start;
        align-items: stretch;

      }
      .label{
        flex: 1;
        font-size: 24px;
        font-weight: bold;
      }
      .icon{
        width: 40px;
        background-color: blanchedalmond;
        text-align: center;
      }

      .page {
        background-color: red;
        /* vh  可见高度 visible height */
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: stretch;
      }
      header {
        height: 48px;
        width: auto;
        background-color: beige;
        
      }
      .container {
        width: auto;
        /* height: 100px; */
        flex: 1;
        background-color: blueviolet;
        display: flex;
        flex-direction: row;
        justify-content: start;
        align-items: stretch;
      }
      aside {
        width: 300px;
        background-color: chocolate;
      }
      main {
        flex: 1;
        background-color: darkblue;
      }
      body {
        margin: 0;
      }
      
    </style>
  </body>
</html>
